{% extends "FOSUserBundle::layout.html.twig" %}

{% block fos_user_content %}
{% include "FOSUserBundle:Profile:edit_content.html.twig" %}
{% endblock fos_user_content %}

{% block footer %}
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ asset('js/libs/jquery-1.7.1.min.js') }}"><\/script>')</script>
        <script type="text/javascript" src="{{ asset('bundles/vietlanduser/js/imgarea.min.js') }}" charset="utf-8"></script>
        <script type="text/javascript">
        function preview(img, selection) { 
                var scaleX = 100 / selection.width; 
                var scaleY = 100 / selection.height; 

                $('#thumbnail + div > img').css({ 
                        width: Math.round(scaleX * {{avatarwidth}}) + 'px', 
                        height: Math.round(scaleY * {{avatarheight}}) + 'px',
                        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
                        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
                });
                $('#fos_user_profile_form_user_cropped').val(Math.round(selection.x1)+'-'+Math.round(selection.y1)+'-'+Math.round(selection.x2)+'-'+Math.round(selection.y2)+'-'+Math.round(selection.width)+'-'+Math.round(selection.height));
        } 

        $(document).ready(function () { 
                $('#save_thumb').click(function() {
                });
        }); 

        $(window).load(function () { 
                $('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
        });

        </script>
{% endblock footer %}
